<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--
    除了文本插值，我们还可以像这样来绑定元素 attribute：
    即标签的属性也可以被赋值
-->

<div id="application">
    <input v-bind:value="context" type="button" />
    <span v-bind:title="message">鼠标悬停查看内容</span>
</div>

<script type="text/javascript">
    let viewModel = new Vue({
       el : "#application",
       data : {
           context : "这是被渲染的内容",
           message: '页面加载于 ' + new Date().toLocaleString()
       }
    });
</script>

<!--
    v-bind attribute 被称为指令。
    指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
    可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。
    在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
    如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
-->

</body>
</html>